<template>
    <div class="smart_container_rightBlock smart_browser">
        <TopNav @changeLangEvent='changeLangEvent'/>
        <div class="smart_container_rightBlock_scroll">
            <!-- <div class="smart_container_rightBlock_title">
                {{$setI18n('lang_br_overview','概览')}}
            </div> -->
            <div class="smart_hash_list">
                <div class="smart_hash_list_lis smart_nav_bg1" >
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalHashRate }}</span>
                        <span class="hash">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalHashRate }}</span> -->
                    </div>
                </div>

                <div class="smart_hash_list_lis smart_nav_bg2">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks" style="font-size:24px">{{ topList.globalDifficulty && Math.floor(parseFloat(topList.globalDifficulty)*100000000000000)/100000000000000 }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
                <!-- && parseFloat(topList.globalDifficulty).toFixed(8)  -->
                <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                <div class="smart_hash_list_lis smart_nav_bg3">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.currentBlockHeight }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_heigh','全网高度')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
                <div class="smart_hash_list_lis smart_nav_bg4">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ top4.blockNumber }}</span>
                        <span class="hash">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
            </div>

            <div class="smart_hash_list1">
                <div class="smart_hash_list_lis smart_nav_bg22">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalDifficulty && parseFloat(topList.globalDifficulty) }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
            </div>

            <div class="smart_block_clearFix">
                <div class="smart_searchBlock smart_qkMessageBlock_right_block">
                    <div class="smart_searchBlock_border">
                        <div class="search_label">{{$setI18n('lang_br_search_label','查询地址，合约，交易块哈希，主块哈希，主节点ID等')}}  </div>
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>

                    </div>
                    <div class="smart_searchBlock_border_phone">
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="max_width1">
                <div class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">{{$setI18n('lang_br_overview','概览')}}</div>
            </div>
            <div class="smart_container_qkMessageBlock11">
                <div class="left">
                    <div class="smart_container_tableList" >
                        <div class="smart_container_dz_table" >
                            <!-- smart_main类型 -->
                            <!-- 主块信息 -->
                            <div class="smart_main" >
                                <!-- <div>主块信息</div> -->
                                <div class="main_flex" >
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                                        <span class="cont orange">{{ topList.globalHashRate }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_heigh','全网高度')}}</span>
                                        <span class="gray cont orange">{{ topList.currentBlockHeight }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                                        <span class="cont orange">{{ top4.blockNumber }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--下载文件-->
            <div class="max_width">
                <div class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">
                    {{$setI18n('lang_downLoad_FileDownLoad',"文件下载")}}</div>
            </div>

            <!--文件下载-->
            <div class="downLoad_max_width left pcshow" >
                <Table :row-class-name="rowClassName" :columns="downLoadList" :data="Object.values(downLoadInfo)">
                </Table>
            </div>

            <div class="max_width left phoneshow" style="margin-top: 25px;margin-left: 20px;margin-right: 20px;margin-bottom: 2500px">
                <Table :row-class-name="rowClassName" :columns="downLoadListPhone" :data="Object.values(downLoadInfo)">
                </Table>
            </div>



            <div class="box pcshow" v-if="isStart">
                <div class="cont">
                    <div class="footer">© 2020 SmartX Community.</div>
                    <div>
                        <ul class="social">
                            <li><a target="_blank" href="https://twitter.com/SmartXOne"><i class="iconfont icon-twitter"></i> </a></li>
                            <li><a target="_blank" href="https://www.facebook.com/SmartX.OneOfficial"><i class="iconfont icon-facebook"></i> </a></li>
                            <li><a target="_blank" href="https://github.com/smartx-core"><i class="iconfont icon-github"></i></a></li>
                            <li><a target="_blank" href="https://t.me/smartx_en"><i class="iconfont icon-telegram"></i></a></li>
                            <li><a target="_blank" href="https://medium.com/smartx"><i class="iconfont icon-medium"></i></a></li>
                            <li><a target="_blank" href="https://discord.gg/JymqJyS"><i class="iconfont icon-discord"></i></a></li>
                            <li><a target="_blank" href="mailto:social@smartx.one"><i class="iconfont icon-email"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from "vue-property-decorator";
  import TopNav from './topNav/topNav.vue';
  import i18n from '@/locale';
  import { mapGetters, mapActions } from "vuex";
  import Utils from '@/utils/index';
  import BarChart1Png   from '@/assets/images/public/BarChart1.png';
  import BarChart2Png   from '@/assets/images/public/BarChart2.png';
  import BarChart3Png   from '@/assets/images/public/BarChart3.png';
  import BarChart4Png   from '@/assets/images/public/BarChart4.png';
  import BarChart5Png   from '@/assets/images/public/BarChart5.png';
  import MapPng         from '@/assets/images/public/Map.png';
  import smartxLogoPng  from '@/assets/images/public/smartx-logo.png';
  import { log } from "@/lib/utils";
  import langEN from 'echarts/src/langEN';


  @Component({
    components:{
      TopNav
    },
    methods:{
      ...mapActions([
        'globalInfoRequestAction',
        'getLatestBlockRequestAction',
        'getGlobalNodeDistInfoRequestAction',
        'getLatestBlockHeightRequestAction',
        'getAccountTransactionsRequestAction',
        'getAccountTransactionsDetailRequestAction',
        'getbalanceRequestAction',
        'getTXBlockRequestAction',
        'getAccountTransactionsAnotherRequestAction',
        'getNumberOfSlicesRequestAction'
      ])
    }
  })
  export default class DownLoad extends Vue {
    private getSmartxLogoPng:any     = smartxLogoPng;

    /** 用户输入的地址; */
    private addressParms:String = '';
    /** 图片 */
    private getBarChart1Png = BarChart1Png;
    private getBarChart2Png = BarChart2Png;
    private getBarChart3Png = BarChart3Png;
    private getBarChart4Png = BarChart4Png;
    private getBarChart5Png = BarChart5Png;
    private getMapPng       = MapPng;

    /** 获取的概览的字段 */
    private topList:Object = {};
    private top4:any = {blockNumber:0}
    /** 当前主块 */
    private currentBlock: any = null;
    /** 最近出块 */
    private tableList:Array<object> = [];
    /** 节点分布 */
    private nodeDistInfoList:Array<object> = [];
    /** 交易信息 */
    private accountTransactionsDetail:any = null;
    /** 查询地址 */
    private accountTransactionsList:any = null;
    /** 代币交易 */
    private accountList:Array<object> = [];
    /** 账户余额 */
    private money:any = null;
    /** 当前选中的区块 */
    private selectIndex:any = null;
    /** 是否显示默认列表 */
    private isShowDefalutTable:boolean = false;
    /** 是否显示交易列表 */
    private isShowJyTable:boolean = false;
    /** 是否显示代币交易分页 */
    private pageShow:boolean = false;
    /** 是否显示地址列表 */
    private isShowDzTable:boolean = false;
    private exchangeRateRatio: any = 1;
    /** 判断返回的btype类型是main还是txs */
    private isSmartxMain: boolean = false;

    private mctxlist: boolean = false;

    private titleBar: string = '';
    /** 头部筛选下拉框 */
    private selectAll:Array<object> = [];

    /** 文件下载列表*/
    private downLoadList:Array<object> = [];
    private downLoadListPhone:Array<object> = [];
    private downLoadInfo:any={
      "0":{"name":this['$setI18n']('lang_downLoad_Faucet', '水龙头'),'content':this['$setI18n']('lang_downLoad_Faucet_content', '手机挖矿App'),'size':'4.20M','url':'https://download.smartx.one/Faucet-2.1.4.apk'},
      "1":{"name":this['$setI18n']('lang_downLoad_SmartXApp', 'SmartXApp'),'content':this['$setI18n']('lang_downLoad_SmartXApp_content', '测试网手机App'),'size':'30.50M','url':'https://download.smartx.one/SATApp-rel-1.2.4.apk'},
      "2":{"name":this['$setI18n']('lang_downLoad_MiningTools', '挖矿软件'),'content':this['$setI18n']('lang_downLoad_MiningTools_content', '电脑挖矿软件'),'size':'6.20M','url':'https://download.smartx.one/SmartX-dotnet-2.1.1a-Minning.zip'},
      "3":{"name":this['$setI18n']('lang_downLoad_smartx_dotnet_runtime', '主网windows运行时'),'content':this['$setI18n']('lang_downLoad_smartx_dotnet_runtime_content', 'VC++运行时 和 .NET Core3.0运行时集合'),'size':'85.80M','url':'https://download.smartx.one/smartx-dotnet-runtime.zip'},
      "4":{"name":this['$setI18n']('lang_downLoad_smartx_dotnet', '节点运行压缩包'),'content':this['$setI18n']('lang_downLoad_smartx_dotnet_content', 'smartx智图主网节点下载'),'size':'6.40M','url':'https://download.smartx.one/SmartX-dotnet-2.1.1.zip'},
    };
    /** 最近出块 */
    private totalPage: any = null;
    private name1: string = 'name1';
    private name:string = 'name1';
    private columns:Array<object> = []

    /** 主块交易 */
    private columns1:Array<object> = []

    /** 普通交易 */
    private columns2:Array<object> = []

    /** 代币交易 */
    private columns3:Array<object> = []
    private columns3_phone:Array<object> = []

    /** 改变 */
    private isStart:boolean = false;
    private nowIndex:number = 1;
    private lang = "ZH";

    /** 拷贝成功 */
    private onCopySuccess():void{
      this.$Message.success('复制成功');
    }


    /** 初始化函数 */
    private mounted():void
    {
      let _index=Utils['getUrlParam']('index');
      let _lang=Utils['getUrlParam']('lang');
      this.lang = _lang || "ZH";
      this.$i18n["locale"] = this.lang==='ZH'?"zh-CN":"en-US";
      this.nowIndex = parseInt(_index) || 1;
      console.log("this.nowIndex = "+this.nowIndex);
      this.changeLangEvent();
      this.titleBar=this['$setI18n']('lang_br_LastBlock', '最近出块');

      (async()=>{
        /** 基础的一些数据 */
        this.top4.blockNumber = await this['getNumberOfSlicesRequestAction']();//获取分片数
        this.topList   =  await this['globalInfoRequestAction']();
        console.log("toplist=");
        console.log(this.topList);
        /** 最近出块 */
        let _res =  await this['getLatestBlockRequestAction'](this.nowIndex);
        this.isStart=true;
        if(_res){
          console.log("初始化_res=");
          console.log(_res);
          this.tableList = _res;
          this.totalPage = _res[0] && _res[0].height + 1
          console.log(this.totalPage)
          this.isShowDefalutTable = true;
        }
      })();
    }

    private changeLangEvent():void
    {
      this.lang = this.$i18n["locale"]==="zh-CN"?'ZH':"EN";
      console.log(this.titleBar, '-----titleBar')
      if(this.titleBar == '账户信息' || this.titleBar == 'Account info'){
        this.titleBar = this['$setI18n']('lang_br_accountInfo','账户信息');
      }else if(this.titleBar == '交易信息' || this.titleBar == 'Transaction info'){
        this.titleBar = this['$setI18n']('lang_br_transactionInfo','交易信息');
      }else {
        this.titleBar = "";//this['$setI18n']('lang_br_LastBlock', '最近出块')
      }
      this.selectAll = [{
        text: this['$setI18n']('lang_br_allScreening','全部筛选'),
        index: 0,
        state: 1
      },{
        text: this['$setI18n']('lang_br_address','地址'),
        index: 1,
        state: 0
      },{
        text: this['$setI18n']('lang_br_transaction','交易'),
        index: 2,
        state: 0
      }];
      this.columns1 = [
        {
          title: this['$setI18n']('lang_hash','交易哈希'),
          key: 'hash',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_toer','转出方'),
          key: 'addressOut',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_fromer','转入方'),
          key: 'addressIn',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_value','金额'),
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_time','时间'),
          slot: 'timestamp'
        },
        {
          title: '操作',
          key: 'state',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    this.selected(params.row)
                  }
                }
              }, '详情'),

            ]);
          }
        }
      ];
      this.downLoadList = [
        {
          title: this['$setI18n']('lang_downLoad_FileName','文件名称'),
          key: 'name',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_downLoad_FileContent','文件内容'),
          key: 'content',
          fixed: 'right',
          width: 560,
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_downLoad_FileSize','文件大小'),
          key: 'size',
          fixed: 'right',
          width: 180,
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_downLoad_DownLoad','下载'),
          key: 'state',
          fixed: 'right',
          width: this.$i18n["locale"]=== "zh-CN"?120:150,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    console.log("开始下载");
                    // this.downLoadFile(params.row);
                    window.location.href = params.row.url;
                    // function downloadExcel() {
                    //   window.location.href = "/tUserHyRights/downloadUsersUrl";
                    // }
                  }
                }
              }, this['$setI18n']('lang_downLoad_DownLoad','下载')),

            ]);
          }
        }
      ]
      this.downLoadListPhone = [
        {
          title: this['$setI18n']('lang_downLoad_FileName','文件名称'),
          key: 'name',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_downLoad_DownLoad','下载'),
          key: 'state',
          fixed: 'right',
          width: this.$i18n["locale"]=== "zh-CN"?120:150,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    console.log("开始下载");
                    // this.downLoadFile(params.row);
                    window.location.href = params.row.url;
                    // function downloadExcel() {
                    //   window.location.href = "/tUserHyRights/downloadUsersUrl";
                    // }
                  }
                }
              }, this['$setI18n']('lang_downLoad_DownLoad','下载')),

            ]);
          }
        }
      ]
      this.columns2 = [
        {
          title: this['$setI18n']('lang_hash','交易哈希'),
          slot: 'hash',
          // tooltip: true,
        },
        {
          title: this['$setI18n']('lang_value','金额'),
          // width: 140,
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_br_transactionType','交易类型'),
          width: 120,
          slot: 'type'
        }
      ]
      this.columns3 = [
        {
          title: this['$setI18n']('lang_hash','交易哈希'),
          slot: 'hash'
        },
        {
          title: this['$setI18n']('lang_value','金额'),
          // width: 120,
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_value_name','代币名'),
          width: 90,
          slot: 'name'
        },
        {
          title: this['$setI18n']('lang_br_transactionType','交易类型'),
          width: 120,
          slot: 'type'
        }
      ]
      this.columns3_phone = [
        {
          title: this['$setI18n']('lang_hash','交易哈希'),
          slot: 'hash'
        },
        {
          title: this['$setI18n']('lang_value','金额'),
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_value_name','代币名'),
          slot: 'name'
        },
        {
          title: this['$setI18n']('lang_br_transactionType','交易类型'),
          slot: 'type'
        }
      ]
      this.columns = [
        {
          title: this['$setI18n']('lang_br_blockHeigh','块高度'),
          width: 100,
          key: 'height'
        },
        {
          title: this['$setI18n']('lang_br_hash','哈希值'),
          key: 'hash',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_transactionNumber','交易笔数'),
          width: 160,
          slot: 'vmCount'
        },
        {
          title: this['$setI18n']('lang_br_blockNumber','分片数'),
          width: 120,
          slot: 'linksblk'
        },
        {
          title: this['$setI18n']('lang_time','时间'),
          width: 200,
          slot: 'timestamp'
        },
        {
          title: this['$setI18n']('lang_br_broadcasts','播报方'),
          // width: 260,
          key: 'Address',
          tooltip: true
        }
      ]
      this.downLoadInfo = {
        "0":{"name":this['$setI18n']('lang_downLoad_Faucet', '水龙头'),'content':this['$setI18n']('lang_downLoad_Faucet_content', '手机挖矿App'),'size':'4.20M','url':'https://download.smartx.one/Faucet-2.1.4.apk'},
        "1":{"name":this['$setI18n']('lang_downLoad_SmartXApp', 'SmartXApp'),'content':this['$setI18n']('lang_downLoad_SmartXApp_content', '测试网手机App'),'size':'30.50M','url':'https://download.smartx.one/SATApp-rel-1.2.4.apk'},
        "2":{"name":this['$setI18n']('lang_downLoad_MiningTools', '挖矿软件'),'content':this['$setI18n']('lang_downLoad_MiningTools_content', '电脑挖矿软件'),'size':'6.20M','url':'https://download.smartx.one/SmartX-dotnet-2.1.1a-Minning.zip'},
        "3":{"name":this['$setI18n']('lang_downLoad_smartx_dotnet_runtime', '主网windows运行时'),'content':this['$setI18n']('lang_downLoad_smartx_dotnet_runtime_content', 'VC++运行时 和 .NET Core3.0运行时集合'),'size':'85.80M','url':'https://download.smartx.one/smartx-dotnet-runtime.zip'},
        "4":{"name":this['$setI18n']('lang_downLoad_smartx_dotnet', '节点运行压缩包'),'content':this['$setI18n']('lang_downLoad_smartx_dotnet_content', 'smartx智图主网节点下载'),'size':'6.40M','url':'https://download.smartx.one/SmartX-dotnet-2.1.1.zip'},
      };
    }

    /** 搜索 */
    private async handleSearch():Promise<any>
    {
      if (this.addressParms == '') {
        this.$Message.warning('Please input anything!');
        return;
      }
      let _select = this.selectAll.filter(_item=> _item['state'] == 1);
      this.selectIndex = _select[0]['index'];
      console.log("select="+this.selectIndex);
      //alert(this.selectIndex);

      if (this.selectIndex == 0) {
        try {
          //先查主块
          // 请求主块失败抛出异常
          await this['getAccountTransactionsDetailRequestAction'](this.addressParms);
          this.isStart=false;
          window.location.href='McMainBlockInformation?blockhash='+this.addressParms+"&lang="+this.lang;
        } catch (err) {
          //如果主块查不到 查交易块
          try {
            await this['getTXBlockRequestAction'](this.addressParms);
            this.isStart=false;
            window.location.href='TransactionDetails?hash='+this.addressParms+"&lang="+this.lang;
          } catch (err) {
            // 查账户
            this.isStart=false;
            window.location.href='AddressSearch?address='+this.addressParms+"&lang="+this.lang;
          }
        }
      }
      else {
        window.location.href='AddressSearch?address='+this.addressParms+"&lang="+this.lang;
      }
    }

    /** 跳到对应的钱包地址 */
    private handleGotoAddressInfor(): void
    {
      this.$router.push({ path: '/browser/addressInformation', query:{ 'address': String(this.addressParms)}});
    }


    private rowClassName (row, index)
    {
      if ((index)%8 === 0) {
        return 'table-row-blue';
      } else if ((index)%8 === 2) {
        return 'table-row-green';
      } else if ((index)%8 === 4) {
        return 'table-row-red';
      } else if ((index)%8 === 6) {
        return 'table-row-yellow';
      }
      return '';
    }

    private async selected(item) {
      let _res = await this["getTXBlockRequestAction"](item.hash);
      if(_res=="false")
      {
        return;
      }
      this.mctxlist = false;
      this.isSmartxMain = false;
      this.isShowJyTable = true; // 控制单个主块css显示
      this.addressParms = item.hash

      this.isShowDzTable = false;
      this.titleBar = this['$setI18n']('lang_br_transactionInfo','交易信息');


      this.accountTransactionsDetail = _res;
      this.currentBlock = _res && _res.height
    }

  }



</script>


<style lang="scss">
    @import 'downLoad';
</style>
